<template>
  <div class="clearfix">
    <a-upload
      :action="uploadAction"
      listType="picture-card"
      :fileList="pictureList"
      :headers="headers"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="pictureList.length < pictureSize">
        <a-icon type="plus" />
        <div class="ant-upload-text">上传图片</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import { PICTURE_LIST, ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction, deleteAction } from '@/api/manage'

export default {
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      fileUploading: [],
      pictureList: [],
      url: {
        fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload'
      },
      headers: {
        // authorization:'authorization-text'
      }
    }
  },
  props: {
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    pictureSize: {
      type: Number,
      default: 3
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
  },
  watch: {
    fileList(newValue) {
      this.pictureList = newValue
    }
  },
  computed: {
    uploadAction: function() {
      return this.url.fileUpload
    }
  },
  methods: {
    handleCancel() {
      this.previewVisible = false
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange({ file, fileList }) {
      this.pictureList = fileList
      if (file.status != 'uploading') {
        this.$emit('changed', { fileList, file })
      }
    }
  }
}
</script>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>